<template>
    <el-menu
        active-text-color="#4093ff"
        unique-opened
        background-color="#"
        class="el-menu-vertical-demo"
        :default-active="activeIndex"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        router
    >
        <el-menu-item index="/index">
            <i class="iconfont homepage"></i>
            <span>首页</span>
        </el-menu-item>

        <el-sub-menu :index="`${p.name}`" v-for="p in userStore.activeMenus" :key="p.id">
            <template #title>
                <i class="iconfont" :class="p.icon"></i>
                <span>{{ p.title }}</span>
            </template>

            <el-menu-item :index="`/${p.name}/${sub.name}`" v-for="sub in p.children" :key="sub.id">
                <i class="iconfont" :class="sub.icon"></i>
                <span>{{ sub.title }}</span>
            </el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>

<script setup lang="ts">
import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue';
import { useUserStore } from '@/store/user/index';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
const userStore = useUserStore();

const handleOpen = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
};
const handleClose = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
};
let activeIndex = ref('/index');
const route = useRoute();
onMounted(() => {
    activeIndex.value = route.path;
});
</script>

<style scoped></style>
